<template>
  <div id="login" >
    <div class="container">
      <div class="title"></div>
      <form class="form1" autocomplete="off" @submit.prevent="onSubmit">
        <div style="overflow: hidden;height: 100%">
          <el-input
            placeholder="请输入您的账号"
            v-model="UserName">
            <i slot="prefix" class="el-icon-login-user"></i>
          </el-input>
          <el-input
            placeholder="请输入您的密码"
            v-model="PassWord"
            show-password
            class="passwordInput"
          >
            <i slot="prefix" class="el-icon-login-password"></i>
          </el-input>
         <!--  <el-input
            placeholder="请输入您的手机号"
            v-model="phone"
            show-password
            class="passwordInput"
          >
            <i slot="prefix" class="el-icon-login-phone"></i>
          </el-input>
          <el-input
            placeholder="请输入验证码"
            v-model="yanZheng"
            show-password
            class="yanzhengInput"
          >
            <i slot="prefix" class="el-icon-login-yanzheng"></i>
          </el-input>
          <el-button style="height: 3rem;margin-left: 3%;border-radius: 0.5rem;width: 34%; color: #a4a4ae;font-size: 0.8vw">发送验证码</el-button>-->
          <el-checkbox v-model="checked">记住密码</el-checkbox>
        </div>
        <!--<button v-loading.fullscreen.lock="fullscreenLoading" class="btn" @click="btn()" >登录</button>-->
          <el-popover
          placement="top"
          width="160"
          @after-enter="showPop"
          trigger="manual"
          v-model="visible">
          <div class="mask_layer_model" v-if="visible" style="z-index: 9;">
            <div class="captcha_model" style="width: 350px;height: 260px;margin-left: 62%;margin-top: 12%">
              <div class="header">
                <span style="font-size: 1rem">请完成安全验证</span>
                <span style="float: right"  title="关闭验证码" @click="close">
                <i class="el-icon-error" style="font-size: 1.4rem;"></i>
            </span>
              </div>
              <div class="content">
                <div class="sliding-pictures">
                  <i class="el-icon-refresh" @click="onRefresh" title="刷新验证码"></i>
                  <div id="captcha12">

                  </div>
                </div>
              </div>
              <div class="sliderContainer">
                <div class="sliderMask">
                  <div class="slider">
                    <span class="sliderIcon"></span>
                  </div>
                </div>
                <span class="sliderText">向右滑动填充拼图</span>
              </div>
            </div>

          </div>
          <button class="btn" slot="reference" @click="btn">登录</button>
        </el-popover>
        <el-dialog
          title="登录手机验证"
          :visible.sync="dialogVisible"
          width="20%"
          :before-close="handleClose">
          <div class="desc"><p class="gray">为保障帐号安全，本次登录需要进行验证</p> <p class="info">请通过密保手机{{telphone}}获取短信验证码</p></div>
         <el-input
           placeholder="请输入验证码"
           v-model="yanZheng"
           show-password
           class="yanzhengInput"
         >
           <i slot="prefix" class="el-icon-login-yanzheng"></i>
         </el-input>
         <el-button @click="getCode" style="height: 3rem;margin-left: 3%;border-radius: 0.5rem;width: 34%; color: #a4a4ae;font-size: 0.8vw" :class="{ active: isActive }">
           <span v-show="isActive" >重新获取</span>
           <span v-show="!isActive">{{count}}s</span>
         </el-button>
          <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="loginSucess">确 定</el-button>
  </span>
        </el-dialog>
      </form>
    </div>
    <div class="logoInfo">2021 &copy;新疆兵团勘测设计院集团股份有限公司</div>

  </div>
</template>

<script>
  const Base64 = require('js-base64').Base64
  import  '../assets/css/captcha.scss'
  import md5 from 'js-md5';
  import AES from '../common/crypto'
  const TIME_COUNT = 60;
  export default {
    created: function() {
    },
    data() {
      return {
        UserName: "",
        PassWord: "",
        phone:'',
        yanZheng:'',
        shi:'',
        checked:false,
        fullscreenLoading: false,
        visible:false,
        dialogVisible:false,
        telphone:'',
        cv:{
          w:310,
          h:155,
        },
        block:{
          l:42, // 滑块边长
          L:42+9*2+3,// 滑块实际边长
          r:9, // 滑块半径
        },
        randomPos:{
          x:0,
          y:0,
        },
        token:'',
        canvasCtx:null,
        blockCtx:null,
        blockDom:null,
        sliderDom:null,
        sliderContainerDom:null,
        sliderMaskDom:null,
        el:null,
        img:null,
        trail:null,
        name:'',
        menu:[],
        menuLevel1:[],
        menuLevel2:[[],[],[],[],[],[],[],[],[]],
        btnData:[],
        userid:null,
        shiName:'',
        shiId:0,
        isActive:false,
        count: 60,
        timer: null,
        mesfrom:{
        applicationid:"threeline",
        company_id_:"650000",
        destaddr:"18782404136",
        extcode:"",
        messagecontent:"短信验证码：326332（30分钟有效）",
        msgfmt:0,
        reqdeliveryreport:0,
        requesttime:"2023-02-05 22:34:43",
        sendmethod:9,
        sismsid:"123"
        },
        checkNun:'',
        appsecret:'6390f4a5699fb413c8b73fe3a2b85e2f2ff2c9a6'
      };
    },
    mounted() {
      this.init();
    },
    created(){
        let userNameCookie=this.getCookie("username");
        let passwordCookie = Base64.decode(this.getCookie("password"));
        if(this.getCookie("remember")=='true'){
          this.UserName=userNameCookie;
          this.PassWord=passwordCookie;
          this.checked=true;
        }else {
          this.checked=false;
        }
    },
    methods: {
      async  btn() {
        this.menuLevel1=[];
        this.btnData=[];
        // var that = this;
        if (this.UserName == "") {
          this.$message.error("请输入正确的账号");
          return false;
        } else if (this.PassWord == "") {
          this.$message.error("请输入正确的密码");
          return false;
        } else {
          /* this.$message({
             message: "登陆成功",
             showClose: true,
             duration:1000,
             type: "success"
           });*/
          //this.$router.push({ path: "/houtai" });
          this.fullscreenLoading = true;
          var keys = 'btkssxydbtkssxyd'
          //   const {data:res}= await this.$http.post('http://59.223.239.59:8802/doLogin/login?username='+this.UserName+"&password="+encodeURIComponent(AES.encrypt(this.PassWord, keys)))
          const {data:res}= await this.$http132.post('/login?username='+this.UserName+"&password="+encodeURIComponent(AES.encrypt(this.PassWord, keys)))

        //  const {data:res}= await this.$http.post('http://localhost:8802/doLogin/login?username='+this.UserName+"&password="+encodeURIComponent(AES.encrypt(this.PassWord, keys)))

          // const {data:res}= await this.$http.post('http://10.16.11.240:15479/doLogin/login?username='+this.UserName+"&password="+encodeURIComponent(AES.encrypt(this.PassWord, keys)))
          // menulevel1   const {data:res}= await this.$http.post('http://10.16.11.240:15479/doLogin?username='+this.UserName+"&password="+this.PassWord)
          if(res.status!=="2000"){
            this.$message.error('登录失败！'+res.message);
            return this.fullscreenLoading = false;
          }
          this.userid=res.data.user.id
          this.shi=res.data.user.unit.cityCode;
          this.shiId=res.data.user.unit.cityId;
          this.telphone=res.data.user.telephone.substring(0,3)+'xxxx'+res.data.user.telephone.substring(7,11)
          this.mesfrom.destaddr=res.data.user.telephone
          console.log(22222222222222)
          this.visible=true;
          this.token=res.data.token;
          this.name=res.data.user.name;
          this.menu=res.data.menu;
          this.shiName=res.data.user.unit.cityName;
          //this.loginSucess()
          //window.sessionStorage.setItem("token","eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxODU5ODI3MTEwMiIsInVuaXROYW1lIjoi546v6K-E6YOoIiwicm9sZXMiOiJST0xFX1JPTEVfYWRtaW4sUk9MRV9ST0xFX3RvdXJpc3QiLCJuYW1lIjoiY2VzaGkiLCJ1bml0SWQiOjEsImlkIjoyLCJleHAiOjE2MTI4MzI5MjEsImlhdCI6MTYxMjIyODEyMSwidXNlcm5hbWUiOiIxODU5ODI3MTEwMiJ9.aNILhNql1zColnRDQzBu2qIATt4TChg8fi-Bb5mNV-CsYZ3YwJuP3tGhAQ9U8U2PfBOnS3S9UY5PrETJoBMlyA");
          // window.sessionStorage.setItem("iserverToken","mIZgLKlc-aqInKprsYjs2O22lBD_KY812GRrsv69dtpd3B2ER5NAB-XFU7UO_yIvjYMUipKxGIxSwzD8ekxJ8w..");
          // this.$router.push({ path: "/showData" });
          /*axios
            .get(window.g.baseURL + "workOrder/login", {
              params: {
                userName: that.UserName, // E00000
                passWord: that.PassWord // 123456
              }
            })
            .then(res => {
              setTimeout(() => {
                this.fullscreenLoading = false;
              }, 3000);
              this.$router.push({ path: "/index" });
              console.log(res);
            })
            .catch(error => {
              console.log("失败");
            });*/
        }
      },
      getMenu1(data){
          for(let index in data){
            if(data[index].parent.unitElement){
              this.btnData.push(data[index].parent.unitElement)
            }
            if(data[index].menuLevel==1){
              this.menuLevel1.push({name:data[index].menuName,path:data[index].parent.path})
            }
            if(data[index].children.length>0){
              this.getMenu1(data[index].children)
            }
          }
      },
      getMenu2(index,data){
        if(data.children.length>0){
          for(let x in data.children){
           if(data.children[x].menuLevel==2){
             this.menuLevel2[index].push({name:data.children[x].menuName,path:data.children[x].parent.path,iconCls:data.children[x].parent.iconCls,unit:data.children[x].parent.unitElement})
           }
          }
        }
      },
      onSubmit(){return false;},
      goditu(){
        window.open('https://59.223.239.59:443/super/services/')
       // window.open('https://10.226.77.11:8809/iserver/services/')
      },
      gotuban(){
        window.open('http://59.223.239.59:8807/iserver/services/')
      //  window.open('https://10.226.77.11/iserver/services/map-shp-sxydshp/rest/maps/sxydshp/layers/sxydshp.rjson')
      },
      showPop(){
        this.canvasInit();
        this.initImg();
        this.bindEvents();
      },
      close(){
        this.visible = false
      },
      init(){

      },
      handleClose(){
        this.$confirm('确认关闭？')
          .then(_ => {
            this.dialogVisible=false
            done();

          })
          .catch(_ => {});
      },
      async getCode() {
        if (!this.timer) {
          this.mesfrom.requesttime=this.sysTime()
          this.mesfrom.messagecontent="尊敬的用户，您正在尝试登录兵团生态环境分区管控信息平台,"+"本次验证码是："+this.getNum()+"，如非您本人操作，可忽略本消息。";
          console.log(this.mesfrom)
          const {data:res}= await this.$http5.post('/v4/orgsinglesms',this.mesfrom, {
            headers: {'appId': 'threeline',
              'company':'650000',
              'sign': this.sha1('threeline'+this.appsecret+Date.parse(new Date())),
              'timestamp': Date.parse(new Date())
            }}
          )
          console.log(res)
          if(res.code!=0){
              return this.$message.error('验证码发送失败，请稍后再试，并联系管理员！')
          }
          this.count = TIME_COUNT;
          this.isActive = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.isActive = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      },
       sysTime(){
        var myDate = new Date();
        var year = myDate.getFullYear();
        var month = myDate.getMonth()+1;
        var date = myDate.getDate();
        var h = myDate.getHours();
        var m = myDate.getMinutes();
        var s = myDate.getSeconds();
        var now = year + '-' +(month < 10 ? "0" :"")+ month + "-"+((date < 10 ? "0" :"")) +date + " "+((h < 10 ? "0" :"")) + h + ':'+((m < 10 ? "0" :"")) + m + ":"+((s < 10 ? "0" :"")) + s;
        return now;
        },
      getNum(){
        var code = "";
        for(var i=0;i<6;i++){
          var radom = Math.floor(Math.random()*10);
          code += radom;
        }
        this.checkNun=code;
        return code
      },
      encodeUTF8(s) {
        var i, r = [], c, x;
        for (i = 0; i < s.length; i++)
          if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
          else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F));
          else {
            if ((x = c ^ 0xD800) >> 10 == 0) //对四字节UTF-16转换为Unicode
              c = (x << 10) + (s.charCodeAt(++i) ^ 0xDC00) + 0x10000,
                r.push(0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F));
            else r.push(0xE0 + (c >> 12 & 0xF));
            r.push(0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F));
          };
        return r;
      },
      sha1(s) {
        var data = new Uint8Array(this.encodeUTF8(s))
        var i, j, t;
        var l = ((data.length + 8) >>> 6 << 4) + 16, s = new Uint8Array(l << 2);
        s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer);
        for (t = new DataView(s.buffer), i = 0; i < l; i++)s[i] = t.getUint32(i << 2);
        s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
        s[l - 1] = data.length << 3;
        var w = [], f = [
            function () { return m[1] & m[2] | ~m[1] & m[3]; },
            function () { return m[1] ^ m[2] ^ m[3]; },
            function () { return m[1] & m[2] | m[1] & m[3] | m[2] & m[3]; },
            function () { return m[1] ^ m[2] ^ m[3]; }
          ], rol = function (n, c) { return n << c | n >>> (32 - c); },
          k = [1518500249, 1859775393, -1894007588, -899497514],
          m = [1732584193, -271733879, null, null, -1009589776];
        m[2] = ~m[0], m[3] = ~m[1];
        for (i = 0; i < s.length; i += 16) {
          var o = m.slice(0);
          for (j = 0; j < 80; j++)
            w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1),
              t = rol(m[0], 5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0,
              m[1] = rol(m[1], 30), m.pop(), m.unshift(t);
          for (j = 0; j < 5; j++)m[j] = m[j] + o[j] | 0;
        };
        t = new DataView(new Uint32Array(m).buffer);
        for (var i = 0; i < 5; i++)m[i] = t.getUint32(i << 2);

        var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function (e) {
          return (e < 16 ? "0" : "") + e.toString(16);
        }).join("");
        return hex;
      },
      loginSucess(){
        if(this.checkNun!=this.yanZheng){
           return this.$message.error('您输入的手机验证码不正确，请重新输入！')
         }
        this.getMenu1(this.menu);
        for(let i in this.menu){
          if(this.menu[i].parent.path=='/shouye'){
            this.getMenu2(0,this.menu[i])
          }else if(this.menu[i].parent.path=='/home'){
            this.getMenu2(1,this.menu[i])
          }else if(this.menu[i].parent.path=='/showData'){
            this.getMenu2(2,this.menu[i])
          }else if(this.menu[i].parent.path=='/zhonghe'){
            this.getMenu2(3,this.menu[i])
          }else if(this.menu[i].parent.path=='/hjjczc'){
            this.getMenu2(4,this.menu[i])
          }else if(this.menu[i].parent.path=='/gongxiang'){
            this.getMenu2(5,this.menu[i])
          }else if(this.menu[i].parent.path=='/houtai'){
            this.getMenu2(6,this.menu[i])
          }else if(this.menu[i].parent.path=='/yingyong'){
            this.getMenu2(7,this.menu[i])
          }
        }
        this.dialogVisible = false;
        window.sessionStorage.setItem("token",this.token);
          //本地token
        // window.sessionStorage.setItem("iserverToken","mIZgLKlc-aqInKprsYjs2LduvZyDL0DV2W0KaZ2giBBnIyCiD-xLjfWCu7gddKQLlS-HkYHLMDPhDT3G2DMXyQ..");
        window.sessionStorage.setItem("iserverToken","nLQQIqAfKGRn2arA8PmsDE1t9P0XZeiaZP1gZJj6RChlxMcObgUe0thjkOjzI6qyFgpNrdAkZTvOpLFfYM4odw..");
        window.sessionStorage.setItem("userid",this.userid);
        window.sessionStorage.setItem("shi",this.shi);
        window.sessionStorage.setItem("shiName",this.shiName);
        window.sessionStorage.setItem("cityId",this.shiId);
        window.sessionStorage.setItem("name",this.name);
        window.sessionStorage.setItem("menu",JSON.stringify(this.menu));
        window.sessionStorage.setItem("menulevel1",JSON.stringify(this.menuLevel1));
        window.sessionStorage.setItem("menulevel2",JSON.stringify(this.menuLevel2));
        window.sessionStorage.setItem("btnData",JSON.stringify(this.btnData));
        window.sessionStorage.setItem("activePath","");
        this.$router.push({ path:  JSON.parse(window.sessionStorage.getItem("menu"))[0].parent.path});
        //this.$router.push({ path:  '/shouye'});
       /* this.setCookie('token',res.token)*/
        this.setUserInfo()
      },
      onRefresh(){
        this.reset()
      },
      onSuccess(){
        this.$message({
          message: '验证成功',
          showClose: true,
          duration:2000,
          type: 'success'
        });
        this.visible = false;
        this.dialogVisible = true;
        this.getCode();
      },
      onFail(){
        this.$message.warning("验证失败，再试一次！");
      },
      bindEvents () {
        this.el.onselectstart = () => false

        let originX, originY, trail = [], isMouseDown = false

        const addClass = function (tag, className) {
          tag.classList.add(className)
        }

        const removeClass = function  (tag, className) {
          tag.classList.remove(className)
        }


        const handleDragStart = function (e) {
          originX = e.clientX || e.touches[0].clientX
          originY = e.clientY || e.touches[0].clientY
          isMouseDown = true
        }

        const handleDragMove = (e) => {
          if (!isMouseDown) return false
          const eventX = e.clientX || e.touches[0].clientX
          const eventY = e.clientY || e.touches[0].clientY
          const moveX = eventX - originX
          const moveY = eventY - originY
          if (moveX < 0 || moveX + 38 >= this.cv.w) return false
          this.sliderDom.style.left = moveX + 'px'
          const blockLeft = (this.cv.w - 40 - 20) / (this.cv.w - 40) * moveX
          this.blockDom.style.left = blockLeft + 'px'

          addClass(this.sliderContainerDom, 'sliderContainer_active')
          this.sliderMaskDom.style.width = moveX + 'px'
          trail.push(moveY)
        }

        const handleDragEnd = (e) => {
          if (!isMouseDown) return false
          isMouseDown = false
          const eventX = e.clientX || e.changedTouches[0].clientX
          if (eventX == originX) return false
          removeClass(this.sliderContainerDom, 'sliderContainer_active')
          this.trail = trail
          const { spliced, verified } = this.verify()
          if (spliced) {
            if (verified) {
              addClass(this.sliderContainerDom, 'sliderContainer_success')
              this.onSuccess();
            } else {
              addClass(this.sliderContainerDom, 'sliderContainer_fail')
              this.onFail();
              this.reset()
            }
          } else {
            addClass(this.sliderContainerDom, 'sliderContainer_fail')
            this.onFail();
            setTimeout(() => {
              this.reset()
            }, 500)
          }
        }
        this.sliderDom.addEventListener('mousedown', handleDragStart)
        this.sliderDom.addEventListener('touchstart', handleDragStart)
        this.blockDom.addEventListener('mousedown', handleDragStart)
        this.blockDom.addEventListener('touchstart', handleDragStart)
        document.addEventListener('mousemove', handleDragMove)
        document.addEventListener('touchmove', handleDragMove)
        document.addEventListener('mouseup', handleDragEnd)
        document.addEventListener('touchend', handleDragEnd)
      },
      verify () {
        const sum = function (x, y) {
          return x + y
        }
        const square =  function  (x) {
          return x * x
        }

        const arr = this.trail // 拖动时y轴的移动距离
        const average = arr.reduce(sum) / arr.length
        const deviations = arr.map(x => x - average)
        const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length)
        const left = parseInt(this.blockDom.style.left)
        return {
          spliced: Math.abs(left - this.randomPos.x) < 10,
          verified: stddev !== 0, // 简单验证下拖动轨迹，为零时表示Y轴上下没有波动，可能非人为操作
        }
      },
      reset () {
        this.sliderContainerDom.className = 'sliderContainer'
        this.sliderDom.style.left = 0
        this.blockDom.style.left = 0
        this.sliderMaskDom.style.width = 0
        this.clean()
        this.img.setSrc(this.getRandomImgSrc())
      },
      clean () {
        this.canvasCtx.clearRect(0, 0, this.cv.w, this.cv.h)
        this.blockCtx.clearRect(0, 0, this.cv.w, this.cv.h)
        this.blockDom.width = this.cv.w
      },
      draw () {
        // 随机创建滑块的位置
        this.randomPos.x = this.getRandomNumberByRange(this.block.L + 10, this.cv.w - (this.block.L + 10))
        this.randomPos.y = this.getRandomNumberByRange(10 + this.block.r * 2, this.cv.h - (this.block.L + 10))
        this.drawBlock(this.canvasCtx, this.randomPos.x, this.randomPos.y, 'fill')
        this.drawBlock(this.blockCtx, this.randomPos.x, this.randomPos.y, 'clip')
      },
      drawBlock(ctx, x, y, operation) {
        let r = this.block.r,
          l = this.block.l,
          PI = Math.PI;

        ctx.beginPath()
        ctx.moveTo(x, y)
        ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI)
        ctx.lineTo(x + l, y)
        ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI)
        ctx.lineTo(x + l, y + l)
        ctx.lineTo(x, y + l)
        ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true)
        ctx.lineTo(x, y)
        ctx.lineWidth = 2
        ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'
        ctx.stroke()
        ctx[operation]()
        ctx.globalCompositeOperation = 'destination-over'
      },
      initImg(){
        const img = this.createImg(() => {
          this.draw()
          this.canvasCtx.drawImage(img, 0, 0, this.cv.w, this.cv.h)
          this.blockCtx.drawImage(img, 0, 0, this.cv.w, this.cv.h)
          const y = this.randomPos.y - this.block.r * 2 - 1;
          const ImageData = this.blockCtx.getImageData(this.randomPos.x - 3, y, this.block.L, this.block.L)
          this.blockDom.width = this.block.L
          this.blockCtx.putImageData(ImageData, 0, y)
        })
        this.img = img
      },
      canvasInit(){
        const canvas = this.createCanvas(this.cv.w, this.cv.h) // 画布
        const block = canvas.cloneNode(true) // 滑块
        block.className = 'block1'
        const el = this.el = document.getElementById('captcha12');
        el.style.position = 'relative'
        el.style.width = this.cv.w + 'px'
        Object.assign(el.style, {
          position: 'relative',
          width: this.cv.w + 'px',
          margin: '0 auto'
        })

        this.el = el
        el.appendChild(canvas)
        el.appendChild(block)
        this.canvasCtx = canvas.getContext("2d");
        this.blockCtx = block.getContext("2d");
        this.blockDom=block;
        this.sliderDom=document.getElementsByClassName('slider')[0];
        this.sliderContainerDom=document.getElementsByClassName('sliderContainer')[0];
        this.sliderMaskDom=document.getElementsByClassName('sliderMask')[0];
      },
      createCanvas (width, height) {
        const canvas = document.createElement('canvas')
        canvas.width = width
        canvas.height = height
        return canvas
      },
      createImg (onload) {
        const img = new Image()
        img.crossOrigin = "Anonymous"
        img.onload = onload
        img.onerror = () => {
          img.setSrc(this.getRandomImgSrc())
        }

        img.setSrc =  (src) =>{
          if (window.navigator.userAgent.indexOf('Trident') > -1) { // IE浏览器无法通过img.crossOrigin跨域，使用ajax获取图片blob然后转为dataURL显示
            const xhr = new XMLHttpRequest()
            xhr.onloadend =  (e) =>{
              const file = new FileReader() // FileReader仅支持IE10+
              file.readAsDataURL(e.target.response)
              file.onloadend = function (e) {
                img.src = e.target.result
              }
            }
            xhr.open('GET', src)
            xhr.responseType = 'blob'
            xhr.send()
          }
          else img.src = src
        }
        img.setSrc(this.getRandomImgSrc())
        return img
      },
      getRandomNumberByRange (start, end) {
        return Math.round(Math.random() * (end - start) + start)
      },
      getRandomImgSrc () {
        //return 'https://picsum.photos/300/150/?image=' + this.getRandomNumberByRange(0, 1084)
        // return 'https://picsum.photos/id/407/300/150'
        return './imgBack2.jpeg'
      },
      setUserInfo(){
        if(this.checked){
          this.setCookie("username",this.UserName)
          // base64加密密码
          let passWord = Base64.encode(this.PassWord)
          this.setCookie("password",passWord)
          this.setCookie("remember",this.checked)
        }else{
          this.setCookie("username","")
          this.setCookie("password","")
          this.setCookie("remember",this.checked)
        }
      },
      getCookie: function (key) {
        if (document.cookie.length > 0) {
          var start = document.cookie.indexOf(key + '=')
          if (start !== -1) {
            start = start + key.length + 1
            var end = document.cookie.indexOf(';', start)
            if (end === -1) end = document.cookie.length
            return unescape(document.cookie.substring(start, end))
          }
        }
        return ''
      },
      setCookie: function (cName, value, expiredays) {
        var exdate = new Date()
        exdate.setDate(exdate.getDate() + expiredays)
        document.cookie = cName + '=' + decodeURIComponent(value) +
          ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
      },
    },
    watch: {
    },

  };
</script>

<style scoped>
  #login {
    align-items: center;
    background: url("../assets/img/backlogin.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    height: 100vh;
  }
  .container {
    width: 28rem;
    height: 18rem;
    border-radius: 15px;
    /*box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);*/
    margin: 0 18px;
    margin-left: 60%;
    margin-top: -14%;
  }
  .title{
    width: 70%;
    margin-left: 10%;
    height: 23%;
    background: url("../assets/img/login.png") no-repeat;
    background-size: 100% 100%;
  }
  .form1 {
    padding: 3.15rem 2.75rem;
    text-align: left;
    background: #fff;
    margin-top: 5%;
    border-radius: 15px;
  }

  .btn {
    background-image: linear-gradient(90deg, #3ee8c2 0%, #25e4a3 74%);
    border-radius: 1.3rem;
    width: 100%;
    border: 1px solid var(--blue);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 0.1rem;
    padding: 0.9rem 4rem;
    text-transform: uppercase;
    color: white;
    transition: transform 80ms ease-in;
    margin-top: 8%;
    transition: 0.8s !important;
    height: 3rem;
  }
  .btn:hover {
    border-radius: 4rem;
  }
  .passwordIcon{
    position: absolute;
    margin-top: -25px;
    width: 22px;
    height: 22px;
    background: url("../assets/img/passwd.png");
  }
  /deep/ .el-input__inner{
    background-color: #eff6fc;
    height:3rem;
    border-radius: 0.5rem;
    padding-left:55px;
  }
  /deep/ .el-input--prefix .el-input__inner {
    padding-left: 2.5rem;
  }
  /deep/ .el-input__inner::placeholder {
    color: #a4a4ae;
    font-size: 0.8vw;
  }
  .passwordInput{
    margin-top: 5%;
  }
  .yanzhengInput{
    margin-top: 5%;
    width: 60%;
  }
  /deep/ .el-checkbox{
    margin-top: 5%;
  }
  .logoInfo{
    position: absolute;
    text-align: center;
    bottom:10%;
    width: 100%;
    font-size: 0.9rem;
    color:#a4a4ae;
  }
  .el-icon-login-user{
    background: url(../assets/img/user.png) center no-repeat;
    background-size: contain;
    margin-top: 99%;
    margin-left: 30%;
  }
  .el-icon-login-user:before{
    content: "替";
    font-size: 16px;
    visibility: hidden;
  }
  .el-icon-login-password{
    background: url(../assets/img/passwd.png) center no-repeat;
    background-size: contain;
    margin-top: 99%;
    margin-left: 30%;
  }
  .el-icon-login-password:before{
    content: "替";
    font-size: 16px;
    visibility: hidden;
  }
  .el-icon-login-phone{
    background: url(../assets/img/phone.png) center no-repeat;
    background-size: contain;
    margin-top: 99%;
    margin-left: 30%;
  }
  .el-icon-login-phone:before{
    content: "替";
    font-size: 16px;
    visibility: hidden;
  }
  .el-icon-login-yanzheng{
    background: url(../assets/img/yanzheng.png) center no-repeat;
    background-size: contain;
    margin-top: 99%;
    margin-left: 30%;
  }
  .el-icon-login-yanzheng:before{
    content: "替";
    font-size: 16px;
    visibility: hidden;
  }
  .active {
    border: .0625rem solid #3980ea;
    background: #fff;
    color: #3980ea;
  }

</style>
